<template>
    <div id="app-box">
        <transition name='fade'>
            <router-view class="router" v-if='initLoaded'></router-view>
        </transition>
        <loading mode="fullscreen" v-show="loading.loadingShow" :title='loading.loadingTitle'></loading>
        <msg-tip :text='msgTip.text' :type='msgTip.type' v-show='msgTip.show' :style-info='msgTip.style'></msg-tip>
    </div>
</template>

<style lang="scss">
    @import "../sass/common";
    body{
        .app-img-list{
            overflow:hidden;
            li{
                cursor:pointer;
                width: 120px;
                height: 120px;
                position: relative;
                float: left;
                margin-left:10px;
                margin-top:5px;
                margin-bottom: 5px;
                border:1px solid $sectionColor;
                border-radius: 4px;
                overflow:hidden;
                transition:ease 250ms all;
                &:hover{
                    border-color:transparent;
                    .edit{
                        opacity: 1;
                    }
                }
                img{
                    max-width:100%;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                }
            }
            .edit{
                opacity:0;
                transition:ease .3s all;
                color:#fff;
                position: absolute;
                left: 0;
                right: 0;
                text-align: center;
                top:0;
                bottom:0;
                background-color: rgba(0, 0, 0, 0.8);
                .iconfont{
                    display: block;
                    width: 100%;
                    font-size: 25px;
                    box-sizing: border-box;
                    height:60px;
                    line-height: 60px;
                    &:hover{
                        color:$red;
                        background-color: rgba(0, 0, 0, 0.95);
                    }
                    &.disabled{
                        pointer-events:none;
                        color:#5a5a5a;
                    }
                }
                .icon-arrow.left{
                    transform:rotate(180deg);
                }
                .icon-trash{
                    font-size: 27px;
                }
            }
        }
        .app-img-list{
        }
        .app-no-data{
            padding-top: 0;
            padding-bottom: 0;
        }
        .card-warn-select{
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            p{
                padding-right: 50px;
                font-weight: normal;
                color:$importColor;
            }
        }
        .user-data__list{
            overflow:hidden;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .user-data__item{
            float:left;
            padding: 0 10px;
            box-sizing:border-box;
            margin-bottom: 10px;
        }
        .user-data__wrap{
            // align-items:center;
            position: relative;
            padding:20px 24px 8px 24px;
            border-radius:2px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            p{
                font-size: 14px;
                line-height: 22px;
            }
            span{
                display: block;
                font-size: 30px;
                font-weight: normal;
                line-height: 38px;
                color:$importColor;
                margin-top: 4px;
            }
            .icon-shangsheng{
                font-size: 28px;
                color:$red;
            }
            .icon-xiajiang{
                font-size: 28px;
                color:$green;
            }
            .icon-jinggao{
                position: absolute;
                right: 10px;
                top: 19px;
                color: $red;
                font-size: 25px;
            }
        }
        .main-content{
            border:1px solid $sectionColor;
            padding:15px;
            margin-top:30px;
            &.no-margin-top{
                margin-top: 0;
            }
        }
        .modal-form-wrap{
            // display:flex;
        }
        .modal-form{
            .form-item{
                padding-top: 0;
            }
            .form-item__key{
                min-width: 8em;
                width: 8em;
                line-height: 1.3;
                &.auto{
                    width: auto;
                }
            }
            .form-item__value{
                flex:1;
            }
        }
        .main-content__title{
            padding:12px 15px;
            border-bottom:1px solid $sectionColor;
            color:$importColor;
            font-weight: 400;
            margin:-15px;
            position: relative;
            background-color: $grayLight;
            margin-bottom:20px;
            &:before{
                content:'';
                position: absolute;
                left:0;
                top:0;
                border-left:3px solid $green;
                height: 100%;
            }
        }
        .card-sub-title{
            padding-left:10px;
            font-size: 12px;
        }
        min-width:880px;
        .total-count{
            display: flex;
            flex-wrap:wrap;
            padding:30px 0;
        }
        .total-count__item{
            padding-right: 30px;
            padding-bottom: 30px;
            p{
                @extend %font-display2;
                font-size: 28px;
                color:$green;
                padding-bottom: 5px;
            }
            span{
                @extend %font-footnote;
            }
        }
        .menu{
            &.no-open > .sub-menu{
                height:0!important;
            }
            // padding:6px 0;
        }
        .menu__item{
            position: relative;
            padding:20px;
            display:flex;
            align-items:center;
            cursor:pointer;
            transition:all ease .3s;
            p{
                font-size: 15px;
            }
            .icon-arrow{
                position: absolute;
                right:10px;
                top:50%;
                font-size: 12px;
                transform:translate(0,-50%);
                color:$defaultColor;
            }
            .icon{
                padding-left:5px;
                padding-right:14px;
                font-size: 16px;
                width: 16px;
                height:16px;

            }
            &.active{
                color:$green;
                background-color:$slideitemback;
            }
            &:hover{
                color:$green;
                .icon-arrow{
                    color:$green;
                }
            }
            &.active{
                .icon-arrow{
                    color:$green;
                }
            }
            &.generate{
                display: block;
                padding-top: 20px;
                padding-bottom: 20px;
                height:auto;
                .icon-text{
                    font-size:40px;
                }
                p{
                    padding-left:0;
                    padding-right:0;
                    padding-top: 12.5px;
                }
            }
        }
        .sub-menu{
            text-align:left;
            padding-left: 35px;
            overflow:hidden;
            transition:all ease .3s;
        }
        .sub-menu__item{
            cursor:pointer;
            text-align:left;
            padding: 13px 0;
            &:active,&:hover,&.active{
                color:$green;
            }
        }
        .loading-min-height{
            min-height:140px;
            position: relative;
        }
        .no-data{
            padding:20px;
            text-align:center;
        }
        .data-count{
            padding-bottom: 20px;
        }
        .data-count__list{
            display:flex;
            flex-wrap: wrap;
            padding-top: 20px;
            min-height:140px;
        }
        .data-count__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            margin-bottom: 15px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
                &.red{
                    color:$red;
                }
            }
            p{
                padding-top: 10px;
            }
            .paid{
                color:$green;
            }
        }
        .table-show-all{
            cursor:pointer;
            display: block;
            text-align:center;
            padding:15px;
            color:$green;
            &:hover{
                color:$defaultColor;
            }
        }
        .main-view{
            padding:0 40px 60px 40px;
            box-sizing:border-box;
            overflow:auto;
        }
        .sub-router{
            padding:0 40px 60px 40px;
            box-sizing:border-box;
            overflow:auto;
        }
        .detail-content-box{
            position: relative;
        }
        .result-info{
            .card-title{
                font-size: 14px;
                color:$defaultColor;
            }
        }
        .result-info__list{
            display: flex;
            flex-wrap:wrap;
        }
        .result-info__item{
            display:flex;
            width: 50%;
            box-sizing:border-box;
            padding-top: 15px;
            &.full{
                width: 100%;
            }
        }
        .result-info__key{
            line-height:1.3;
            color:$importColor;
            width: 150px;
        }
        .result-info__value{
            flex:1;
            line-height:1.3;
            padding-left: 10px;
            padding-right: 10px;
            color:$importColor;
            font-weight: normal;
            word-break: break-all;
        }
        .print-buttons{
            padding-top: 50px;
            padding-bottom:50px;
            .back{
                width: 80px;
                margin-right:20px;
            }
            text-align:center;
        }
        .print-button__item{
            text-align:center;
            cursor:pointer;
            display: inline-block;
            width: 260px;
            padding: 8px 0;
            border:1px solid $green;
            color:$green;
            font-size: 15px;
            transition:ease .3s all;
            &:hover{
                background-color: rgba($green,.1);
            }
        }
        .fast-button{
            .iconfont{
                cursor:pointer;
                font-size: 20px;
                width: 20px;
                height: 20px;
                color:$green;
                margin-left:15px;
                &:hover{
                    color:darken($green,10%);
                }
            }
        }
        .card-title{
            font-size: 18px;
            font-weight: normal;
            padding-bottom:15px;
            border-bottom:1px solid $sectionColor;
            color:$importColor;
            padding-top: 46px;
            position: relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            .picker{
                display: flex;
                align-items: center;
                .form-item__value{
                    margin-left: 10px;
                }
                .form-button{
                    padding-left: 10px;
                }
                .split{
                    @extend %font-body1;
                    color:$defaultColor;
                    padding-left:10px;
                }
            }
        }
        .card-title__button-box{
            font-size: 13px;
            display: flex;
            .form-item{
                padding-bottom: 0;
            }
            .form-item__value{
                margin-left: 10px;
            }
            .component-button-loading{
                margin-left:10px;
            }
            .component-button-loading__button{
                line-height:30px;
                padding:0 15px;
                font-size: 13px;
                font-weight: normal;
                font-weight: 300;
            }
        }
        .card-title__button{
            cursor:pointer;
            line-height:32px;
            color:#fff;
            background-color: $green;
            padding:0 15px;
            margin-left:10px;
            border-radius:3px;
            text-align:center;
            font-size: 13px;
            font-weight: normal;
            font-weight: 300;
            transition:ease .3s all;
            &:hover{
                background-color: darken($green,10%);
            }
        }
        .tag-list{
            display: flex;
            flex-wrap:wrap;
        }
        .tag__item{
            padding:5px 10px;
            border:1px solid #d9d9d9;
            border-radius: 3px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: #fafafa;
        }
        // form
        .form-box{
            width: 360px;
            margin:0 auto;
            &.auto{
                width: auto;
                margin: 0;
            }
            &.transparent{
                background-color: transparent;
                border:none;
            }
        }
        .form-table{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding: 5px 0;
            margin-top:20px;
            // border-bottom:1px solid $sectionColor;
            .form-content{
                display:flex;
                align-items:center;
                flex: 1;
                flex-wrap: wrap;
            }
            .form-button{

            }
            .form-item{
                width: auto;
                padding: 5px 10px;
                &.half{
                    width: 50%;
                }
            }
        }
        .form-content{
            background-color: #fff;
        }
        .form-item{
            font-size:13px;
            display:flex;
            align-items:center;
            width:100%;
            box-sizing:border-box;
            padding-bottom: 20px;
            &.small-bottom{
                padding-bottom:5px;
            }
        }
        .form-item__key{
            display:block;
            padding-right: 10px;
        }
        .card-content{
            border: 1px solid #eee;
            padding: 15px;
            margin-top: 30px;
            border-radius: 3px;
        }
        .card-warn{
            border:1px solid $sectionColor;
            padding:10px;
            margin:20px 0;
            background-color: #E6EBF5;
        }
        .card-warn-title{
            @extend %font-button;
            color:$importColor;
            padding-bottom: 20px;
        }
        .card-warn-select{
            display: flex;
            align-items: center;
            p{
                padding-right: 50px;
                font-weight: normal;
                color:$importColor;
            }
        }
        .card-warn-tips{
            padding-top: 5px;
            margin-top: 20px;
            font-size: 12px;
            line-height: 1.5;
        }
        .card{
            padding-top: 20px;
        }
        .sub-title-single{
            font-size: 16px;
            font-weight: 500;
            margin-top: 16px ;
            color:$importColor;
        }
        .sub-title{
            padding:0 15px;
            border-bottom:1px solid $sectionColor;
            color:$importColor;
            font-weight: 400;
            margin:-15px;
            position: relative;
            background-color: $grayLight;
            margin-bottom:20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title{
                padding:12px 0;
            }
            .button{
                display: inline-block;
                padding-left: 5px;
            }
            &:before{
                content:'';
                position: absolute;
                left:0;
                top:0;
                border-left:3px solid $green;
                height: 100%;
            }
        }
        .form-item__value{
            position: relative;
            color:$importColor;
            display:flex;
            justify-content:space-between;
            align-items:center;
            width: 160px;
            &.full{
                width: 100%;
                flex:1;
            }
            box-sizing:border-box;
            input,select,textarea,.component-datepick__value{
                border:1px solid $sectionColor;
                border-radius:4px;
                @extend %font-input;
                flex:1;
                width: 100%;
                box-sizing:border-box;
                line-height: 30px;
                padding:0 8px;
                transition:ease all .3s;
            }
            .unit{
                position: absolute;
                right:5px;
                top:50%;
                line-height: 30px;
                font-weight: bold;
                margin-top:-15px;
                &+input{
                    padding-right: 30px;
                }
            }
            .item{
                border:1px solid transparent;
                border-radius:4px;
                @extend %font-input;
                flex:1;
                text-align: left;
                font-weight: normal;
                line-height: 30px;
                padding:0 8px;
                transition:ease all .3s;
            }
            textarea{
                transition:border ease .3s;
            }
            input:focus{
                border-color:$green;
            }
            textarea:focus{
                border-color:$green;
            }
        }
        .form-item__text{
            padding:19px 0;
            &.no-choose{
                color:$disabledColor;
            }
        }
        .table-box{
            position: relative;
            min-height: 140px;
        }
        .table-list{

        }
        .table-list table {
            border-collapse: separate;
            width: 100%;
            border-top: none;
            border-left: none;
            .option-box{
                margin-left:-4px;
            }
            .option-button{
                cursor: pointer;
                padding: 10px 4px;
                color: $green;
                position: relative;
                &.disabled{
                    color:$disabledColor;
                }
                &:after{
                    content:'';
                    position: absolute;
                    right:-2px;
                    top:50%;
                    height:12px;
                    margin-top:-6px;
                    border-right: 1px solid $sectionColor;
                }
                &:last-child:after{
                    display: none;
                }
            }
        }
        .roles-list{
            overflow:auto;
            max-width: 190px;
            .tag__list{
                
            }
            .tag__item{
                margin-right: 0;
                float:left;
                font-size: 11px;
                line-height:19px;
                margin-bottom: 5px;
                margin-right: 5px;
                padding: 0px 5px;
                text-align: center;
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }
        .table-list__info{
            p{
                padding:5px 0;
                &.title{
                    font-weight: normal;
                }
            }
        }
        .table-list__head{
            th,td{
                height:30px;
                line-height:1.4;
                font-size:14px;
                font-weight:normal;
                color:#000;
                text-align:left;
                border-bottom:1px solid $sectionColor;
            }
            th{
                padding:10px 8px 10px 0;
            }
            td{
                padding:16px 8px 16px 0;
            }
        }
        .table-list__body {
            &.have-border{
                th,td{
                    border-bottom:1px solid $sectionColor;
                }
            }
            tr{
                th,td{
                    height:40px;
                    font-size: 14px;
                    padding:7px 8px 7px 0;
                    background-color: #FFF;
                    line-height:1.4;
                    text-align:left;
                }
            }
        }
    }


</style>
<script>
    import { Promise } from 'es6-promise'
    import client from '../utils/client'
    import loading from '../components/Loading.vue'
    import msgTip from '../components/MsgTip.vue'
    import { loginApi, systemApi } from '../api/api'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        components:{
            loading,
            msgTip
        },
        methods:{
            ...mapActions([
                'setUserId',
                'setDocumentClick',
                'showLoading',
                'hideLoading',
                'setMenuList',
                /*'setAppConfig'*/
            ]),
            init(){
                this.initLoaded = true
            }
        },
        data(){
            return {
                initLoaded:false
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo'
            ]),
            routerAnimation(){
                console.log(this.localInfo.routerAnimation)
                return this.localInfo.routerAnimation
            },
            documentClick(){
                return this.localInfo.documentClick
            }
        },
        created(){
            console.log(process.env)
            /*systemApi.getAppConfig()
            .then(result=>{
                this.setAppConfig(result)
            })
            .catch(error=>{
                console.error(error)
            })*/
            this.setMenuList()
            client.initializeAll( () => this.init(), {} )

            this.$nextTick(()=>{
                $(document).on('click',()=>{
                    if(this.documentClick === true) return
                    this.setDocumentClick(true)
                })
            })
        },
    }
</script>
